<script setup>
import {ref, reactive, inject} from "vue";
import {useRoute} from "vue-router";
import {AddtoCartService, getItem, getProductFromItemId} from "@/api/catalog";
import {buyNowAtOnce} from "@/api/cartOrder";
import router from "@/router";
import {ElMessage} from "element-plus";

const route=useRoute()
const itemId=reactive(route.query.itemId);
const category=reactive(route.query.category);
const Item=ref([]);
const isSearch = inject('isSearch')
const pic=ref('');
isSearch.value=true;

const getData=async()=>{
  let data=await getItem(itemId);
  if(data.status==1){
    Item.value=data.data;
    console.log(data.data)
  }else {
    alert('请求失败');
  }
  const data1=await getProductFromItemId(itemId);
  if(data1.status==1){
    pic.value=data1.data.descn;
  }
}
getData();
async function AddToCart(itemId) {
 if(localStorage.getItem('token')){
   let res = await AddtoCartService(itemId);
   alert(res.message);
 }else{
   ElMessage.error('请先登录');
 }
}


const buyNow=async (ItemId)=>{
   const data=await buyNowAtOnce(ItemId);
   if(data.status==1){
     console.log('data.value');
     console.log(data);

     await router.push({
       path: '/confirmOrder',
       query: {
         orderId:data.data.orderId
       }
     });
   }else{
     alert('失败');
   }
}
</script>

<template>
  <div id="show">
      <div id="BackLink">
        <router-link :to="{ path: '/productForm', query: {productId:Item.productid,category:category}}">   Return to {{ Item.productid }}</router-link>
      </div>
      <div id="itemContent">
      <!--<div class="content" id="popLayer" style="text-align: center;background-color: #ffffff;">-->
      <!--  <span class="cartMsg">提示:成功加入购物车!</span>-->
      <!--</div>-->
      <!--<div class="content" id="errorMsg1" style="text-align: center;background-color: #ffffff;">-->
      <!--  <span class="cartMsg"></span>-->
      <!--</div>-->
      <!--            <div id="tableContent">-->
      <table class="showItemTable">
          <tr>
            <td class="showItem" ><img :src="pic" >
              {{ Item.attr1 }}
            </td>
          </tr>
          <tr>
            <td class="showItem">{{ Item.itemid }}</td>
          </tr>
          <tr>
            <td class="showItem" >{{ Item.productid }}</td>
          </tr>
          <tr>
            <td class="showItem" >{{ Item.listprice }}</td>
          </tr>
          <tr>
            <td class="showItem" >{{ Item.qty }}</td>
          </tr>
          <tr>
            <td id="itemButtonContent">
              <button v-on:click="AddToCart(Item.itemid)">Add to Cart</button>
              <button @click="buyNow(Item.itemid)">Buy Now</button>
            </td>
          </tr>

      </table>

      </div>
  </div>
</template>

<style>
.showItemTable{
  width:64%;
  padding-top: 30px;
  padding-left: 37%;
  /*border-collapse: separate;*/
  /*border-spacing: 2px; !* 设置为你想要的间隔大小 *!*/
  margin-bottom: 20px;

}
.showItemTable tr,.showItemTable td{
  background-color: #dae8da;
  padding: 15px 15px 15px 15px;
  border-spacing:0px;
  margin: 0px;
  width: 380px;
  text-align: left;
  color: black;
  font-size: 20px;
  font-weight: bold;
  text-shadow: 1px 1px 1px #ffffff;
  border-top: 1px solid #defceb;
  border-bottom: 1px solid #c1efca;
  border-right: 1px solid #cbd8cc;

}
.showItemTable button{
 margin-left: 10%;
}
</style>